<template>
  
    <div >
    <ul class="right-bot-item">
        <li>
          <div class="right-bot-item-left"><h2>1</h2></div>
            <div class="right-bot-item-left-1">
              <div><h5>赘婿</h5></div>
              <div class="right-bot-item-right">
                <p>更新至20集</p>
                <p class="p">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                  </svg>
                  <span>2000</span>
                </p>
              </div>
            </div>
        </li>

        <li>
          <div class="right-bot-item-left"><h2>2</h2></div>
            <div class="right-bot-item-left-1">
              <div><h5>赘婿</h5></div>
              <div class="right-bot-item-right">
                <p>更新至20集</p>
                <p class="p">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                  </svg>
                  <span>1020</span>
                </p>
              </div>
            </div>
        </li>
        <li>
          <div class="right-bot-item-left"><h2>3</h2></div>
            <div class="right-bot-item-left-1">
              <div><h5>赘婿</h5></div>
              <div class="right-bot-item-right">
                <p>更新至20集</p>
                <p class="p">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                  </svg>
                  <span>2011</span>
                </p>
              </div>
            </div>
        </li>
        <li>
          <div class="right-bot-item-left tit-color"><h2>4</h2></div>
            <div class="right-bot-item-left-1">
              <div><h5>赘婿</h5></div>
              <div class="right-bot-item-right">
                <p>更新至20集</p>
                <p class="p">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                  </svg>
                  <span>1002</span>
                </p>
              </div>
            </div>
        </li>
        <li>
          <div class="right-bot-item-left tit-color"><h2>5</h2></div>
            <div class="right-bot-item-left-1">
              <div><h5>赘婿</h5></div>
              <div class="right-bot-item-right">
                <p>更新至20集</p>
                <p class="p">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                  </svg>
                  <span>1000</span>
                </p>
              </div>
            </div>
        </li>
      </ul>
      
  </div>
 
  
</template>

<script>
export default {
  name:'CarShow'
}
</script>

<style scoped>
   .right-bot-item li{
   width: 100%;
   height: 55px;
   display: flex;
 }
 .right-bot-item-left{
    width: 20%;
    height: 60px;
 }
 .right-bot-item-left-1{
    width: 60%;
    height: 60px;
 }
 .right-bot-item-left-1 h5{
   font: 18px;
   color: #fcfcfc;
 }
 .right-bot-item-right{
   width: 100%;
   display: flex;
   justify-content: space-between;
 }
 .right-bot-item-right p{
   color: #fff;
 }
 .right-bot-item-right .p svg{
   color: rgb(236, 127, 127);
 }
 .right-bot-item-right .p span{
   color:#000;
 }
 .right-bot-item-left h2{
    margin: 0 20px;
    color: rgb(248, 56, 56);
     /* background-image: -webkit-linear-gradient(top, rgb(240, 16, 53), rgb(192, 39, 179), rgb(80, 82, 231));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    font: 600 50px Impact;
 }
 h2{
   width: 30px;
   height: 60px;
   margin-bottom: 0;
 }
 .aaa img{
   width: 100%;
   height: 320px;
 }
 .tit-color h2{
   color: darkblue;
   /* background-image: -webkit-linear-gradient(bottom, rgb(255, 159, 115), rgb(11, 255, 31));
    -webkit-background-clip: text;
    color: transparent;*/
 } 
</style>